Three.js Renderer&BufferGeometry

渲染器

WebGLRenderer

import * as THREE from "three";
const renderer = new THREE.WebGLRenderer({ antialias: true });
//定义渲染器
renderer.setClearColor(0xffceeb)
//设置背景色
        

渲染器

WebGPURenderer

import * as THREE from "three/webgpu";
const renderer = new THREE.WebGPURenderer({ antialias: true });
//定义渲染器
renderer.setClearColor(0xffceeb)
//设置背景色
        

BufferGeometry

定义点面 (Define Points/Faces)

四个顶点，不共点 (Four Vertices, Non-indexed)

绘制前三个顶点组成一个三角形。因为顶点顺序是顺时针，看到的是背面。 使用 `side: THREE.DoubleSide` 使其可见。调整右侧 `color` 和 `side`。

const bg = new THREE.BufferGeometry();
const verts = new Float32Array([
  -1.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, -1.0, 0.0, -1.0, -1.0, 0.0,
]); 
//方形的四个顶点，按顺时针顺序
bg.setAttribute("position", new THREE.BufferAttribute(verts, 3));
//设置位置属性，读取顶点数组，每3个为一组
const material = new THREE.MeshBasicMaterial({
    color: 0x0000ff,
    side: THREE.DoubleSide // Initially DoubleSide
});
const mesh = new THREE.Mesh(bg, material);
        

四个顶点，共点 (Four Vertices, Indexed)

使用索引 `[1, 0, 3, 1, 3, 2]` 从4个顶点绘制两个三角形组成一个四边形。 默认看到正面。调整右侧 `color` 和 `side`。

const bg = new THREE.BufferGeometry();
const verts = new Float32Array([
  -1.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, -1.0, 0.0, -1.0, -1.0, 0.0,
]);//方形的四个顶点，按顺时针顺序
const index = new Uint16Array([1, 0, 3,  1, 3, 2]);
//定义顶点的编号数据
bg.setAttribute("position", new THREE.BufferAttribute(verts, 3));
//设置位置属性，读取顶点数组，每3个为一组
bg.setIndex(new THREE.BufferAttribute(index, 1));
//设置编号顺序
const material = new THREE.MeshBasicMaterial({
    color: 0xff8800,
    side: THREE.FrontSide // Initially FrontSide
});
const mesh = new THREE.Mesh(bg, material);
        

BufferGeometry

定义不同面对应的材质 (Define Materials for Different Faces)

使用 `geometry.addGroup` 为索引 0-2 (第一个三角形) 和 3-5 (第二个三角形) 指定不同材质。 右侧控件可调整两种材质的 `color` 和 `wireframe`。

            
bg.addGroup(0, 3, 0); // Triangle 1, Material 0
//通过addGroup方法，定义起始顶点编号，定义延续到哪个编号，定义对应材质编号
bg.addGroup(3, 3, 1); // Triangle 2, Material 1
const materials = [
  new THREE.MeshBasicMaterial({ // Material 0
    color: 0xff0000, // Red
    side: THREE.DoubleSide
  }),
  new THREE.MeshBasicMaterial({ // Material 1
    color: 0x00ff00, // Green
    wireframe: true,
    side: THREE.DoubleSide
  })
];
//定义两个材质
const plane = new THREE.Mesh(bg, materials);
        

材质常用的三个属性 (Common Material Properties)

演示 `color`, `wireframe`, 和 `side` 属性。调整右侧控件查看效果。

const material = new THREE.MeshBasicMaterial({
  color: 0xff00ff,   // Magenta color
  wireframe: true,   // Show as wireframe
  side: THREE.DoubleSide // Render both faces
});
const mesh = new THREE.Mesh(indexedGeometry, material);